<template>
  <view class="example-page">
    <view class="example-header">
      <text class="example-title">车辆信息</text>
    </view>
    
    <view class="car-info">
      <view class="info-item">
        <text class="label">品牌：</text>
        <text class="value">{{ selectedBrand ? selectedBrand.name : '请选择品牌' }}</text>
        <button class="select-btn" @click="selectBrand">选择品牌</button>
      </view>
      
      <view class="info-item">
        <text class="label">车型：</text>
        <text class="value">{{ selectedSeries ? selectedSeries.name : '请选择车型' }}</text>
        <button class="select-btn" @click="selectSeries" :disabled="!selectedBrand">选择车型</button>
      </view>
    </view>
    
    <view class="submit-section">
      <button class="submit-btn" @click="handleSubmit" :disabled="!selectedBrand || !selectedSeries">
        确认选择
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CarSelectorExample',
  data() {
    return {
      selectedBrand: null,
      selectedSeries: null
    }
  },
  methods: {
    // 选择品牌
    selectBrand() {
      uni.navigateTo({
        url: '/pages/carSelector/index'
      })
    },
    
    // 选择车型
    selectSeries() {
      if (!this.selectedBrand) {
        uni.showToast({
          title: '请先选择品牌',
          icon: 'none'
        })
        return
      }
      
      uni.navigateTo({
        url: `/pages/carSelector/index?brandId=${this.selectedBrand.id}&brandName=${this.selectedBrand.name}`
      })
    },
    
    // 处理车辆选择结果
    handleCarSelected(result) {
      if (result.brand) {
        this.selectedBrand = result.brand
      }
      if (result.series) {
        this.selectedSeries = result.series
      }
      
      console.log('车辆选择结果:', result)
    },
    
    // 提交选择
    handleSubmit() {
      if (!this.selectedBrand || !this.selectedSeries) {
        uni.showToast({
          title: '请先选择品牌和车型',
          icon: 'none'
        })
        return
      }
      
      uni.showModal({
        title: '选择结果',
        content: `品牌：${this.selectedBrand.name}\n车型：${this.selectedSeries.name}`,
        showCancel: false
      })
    }
  },
  onShow() {
    // 检查是否有选择结果
    const pages = getCurrentPages()
    if (pages.length > 1) {
      const prevPage = pages[pages.length - 2]
      if (prevPage && prevPage.$vm && prevPage.$vm.handleCarSelected) {
        // 模拟选择结果传递
        setTimeout(() => {
          this.handleCarSelected({
            brand: { id: 15, name: '奥迪' },
            series: { id: 101, name: 'A4L' }
          })
        }, 500)
      }
    }
  }
}
</script>

<style scoped>
.example-page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.example-header {
  text-align: center;
  margin-bottom: 30px;
}

.example-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.car-info {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.label {
  font-size: 16px;
  color: #333;
  width: 60px;
  flex-shrink: 0;
}

.value {
  font-size: 16px;
  color: #666;
  flex: 1;
  margin-right: 10px;
}

.select-btn {
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  flex-shrink: 0;
}

.select-btn:disabled {
  background-color: #ccc;
}

.submit-section {
  text-align: center;
}

.submit-btn {
  background-color: #ff6b35;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 30px;
  font-size: 16px;
  width: 100%;
}

.submit-btn:disabled {
  background-color: #ccc;
}
</style> 